<template>
  <div class="box">
    <!-- 左边导航栏 -->
    <div class="nav">
      <!-- 方法一：目录数量是固定的 -->
      <!-- <router-link to="/home">home</router-link>
      <router-link to="/setup">setup</router-link>
      <router-link to="/ref">ref</router-link> -->

      <!-- 方法二：根据路由数量，动态加载目录 -->
      <!-- list=["/home","/setup","/ref"] -->
      <router-link :to="item" v-for="item in list">{{
        item.slice(1)
      }}</router-link>
    </div>
    <!-- 右边内容 -->
    <div class="content">
      <!-- <router-view></router-view> -->


      <router-view v-slot="{ Component }"> 
         <keep-alive exclude="hooks">
          <component :is="Component" />
        </keep-alive> 
    </router-view>
    </div>
  </div>
</template>

<!-- <script lang="ts">
import router from '@/router';
interface obj{
  list:string[]
}
interface obj2{
  path:string,
  [propName:string]:unknown
}
export default{
  data(){
    let dataObj:obj={
      list:[]
    }
    return dataObj
  },
  mounted() {
      // console.log(router.options.routes);
      this.list=router.options.routes.filter((item:obj2)=>{
        if(item.path!=="/"){
          return true;
        }
      }).map((item:obj2)=>{
        return item.path;
      })
      
  },
}
</script> -->

<script setup lang="ts">
import router from "@/router";
interface obj2 {
  path: string;
  [propName: string]: unknown;
}
let list = router.options.routes
  .filter((item: obj2) => {
    if (item.path !== "/") {
      return true;
    }
  })
  .map((item: obj2) => {
    return item.path;
  });
</script>

<!-- scoped:用于在组件中使用局部作用域的CSS样式 -->
<style scoped lang="scss">
.box {
  display: flex;
  justify-content: space-between;
  height: 100%;

  .nav {
    width: 100px;
    background-color: yellow;
    padding: 10px;
    display: flex;
    flex-direction: column;
  }
  .content {
    width: 500px;
    background-color: green;
    flex-grow: 1;
  }
}
</style>
